<template>
  <div class="blog-detail-container">
    <div class="blog-detail-content">
      <!-- 设置overflow:visible让子元素的sticky生效 -->
      <el-card style="overflow: visible; margin-bottom: 20px">
        <div class="blog-title">
          {{ blogData.title }}
        </div>
        <!-- 绑定点击事件 -->
        <div class="blog-info">
          <div class="blog-info-text">
            <span class="blog-info-text-item" style="margin-right: 20px"
              ><i class="el-icon-user blog-info-text-item-icon"></i
              ><span>{{ blogData.authorName }}</span></span
            >
            <span class="blog-info-text-item">
              <i class="el-icon-time blog-info-text-item-icon"></i>
              <span>于{{ blogData.date }}发布</span>
            </span>
            <span class="blog-info-text-item">
              <i class="el-icon-view icon blog-info-text-item-icon"></i>
              <span>阅读量{{ blogData.viewCounts }}</span>
            </span>
            <span class="blog-info-text-item">
              <i class="el-icon-star-on blog-info-text-item-icon"></i>
              <span>收藏{{ blogData.collectCounts }}</span>
            </span>
            <span class="blog-info-text-item">
              <i class="el-icon-thumb blog-info-text-item-icon"></i>
              <span>点赞数{{ blogData.likeCounts }}</span>
            </span>
          </div>
          <div class="blog-info-tags">
            <span class="blog-info-tags-item"
              >类型&nbsp;&nbsp;&nbsp;<el-tag
                effect="dark"
                size="small"
                type="info"
                >{{ blogData.kindName }}</el-tag
              ></span
            >
            <span class="blog-info-tags-item"
              >标签&nbsp;&nbsp;&nbsp;<el-tag
                v-for="(item, index) in blogData.tags"
                :key="index"
                class="tag"
                effect="dark"
                size="small"
                style="margin-right: 8px"
                >{{ item }}</el-tag
              ></span
            >
          </div>
        </div>
        <!-- 分割线分割内容 -->
        <el-divider class="blog-divider"
          ><i class="el-icon-document" style="font-size: 18px"></i
        ></el-divider>
        <div
          class="blog-content"
          id="blog-content"
          style="text-align: left"
          v-html="blogData.content"
        ></div>
        <!-- 粘滞定位，点赞和收藏栏 -->
        <div class="info-like-container">
          <div class="blog-detail-author-info">
            <div class="avatar-container">
              <!-- 头像和昵称链接到个人主页 -->
              <el-link
                target="_blank"
                :underline="false"
                style="padding-top: 4px"
              >
                <el-avatar
                  :size="50"
                  :src="blogData.bloggerAvatarUrl"
                  fit="fit"
                ></el-avatar>
              </el-link>
            </div>
            <div class="author-name-container">
              <el-link target="_blank" :underline="false">
                {{ blogData.authorName }}
              </el-link>
            </div>
            <div class="follow-button">
              <el-button plain type="primary" size="mini" icon="el-icon-plus"
                >关注</el-button
              >
            </div>
          </div>
          <div class="blog-like-collect-content">
            <!-- 未点赞 -->
            <div class="blog-like">
              <span @click="handleLikeClick">
                <img
                  class="is-like-img point"
                  :src="likeDefaultImg"
                  v-if="!blogData.isLikeActive"
                />
                <!-- 已点赞 -->
                <img class="is-like-img point" :src="likeActiveImg" v-else />
                <span>{{ blogData.likeCounts }}</span>
              </span>
            </div>
            <div class="blog-collect">
              <span @click="handleCollectClick">
                <i
                  class="el-icon-star-off"
                  style="font-size: 20px; margin-right: 5px"
                  v-if="!blogData.isCollectActive"
                ></i>
                <i
                  class="el-icon-star-on"
                  style="font-size: 22px; color: #d81e06; margin-right: 5px"
                  v-else
                ></i>
                <span>{{ blogData.collectCounts }}</span>
              </span>
            </div>
          </div>
        </div>
        <!-- 评论区的内容 -->
        <div class="comment">
          <div class="title">评论区</div>
          <div class="contentBox">
            <!-- 此处展示的是当前用户（浏览者的信息）直接生成父级评论 -->
            <!-- 单独给当前用户的评论设置padding便于显示button -->
            <div class="contain">
              <div class="CommentBox">
                <div class="left">
                  <el-avatar
                    :size="50"
                    :src="userInfo.avatarUrl"
                    fit="fit"
                  ></el-avatar>
                </div>
                <div class="right">
                  <!-- 限制输入数据长度防止后端存不下 -->
                  <el-input
                    style="font-size: 16px"
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                    placeholder="来发表你自己的评论吧！"
                    :maxlength="300"
                    show-word-limit
                    spellcheck="false"
                    v-model="userInfo.selfComment"
                  >
                  </el-input>
                  <div class="CommentBtn">
                    <el-button
                      type="danger"
                      round
                      size="mini"
                      class="CommentBtn-el-button"
                      @click="addUserComment"
                      >评论</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <!-- 展示文章下面的所有评论，首先是父级评论 -->
            <div
              v-for="(item, index) in temComments"
              :key="index"
              class="contain"
            >
              <div class="CommentBox">
                <div class="left">
                  <el-avatar
                    :size="50"
                    :src="item.avatarUrl"
                    fit="fit"
                  ></el-avatar>
                </div>
                <div class="right">
                  <div class="subTitle" style="text-align: left">
                    <span> {{ item.userName }} </span>
                    <span>{{ item.commentTime }}</span>
                    <span class="hoverBtn">
                      <!-- 当前用户是作者本人时可以删除任意的评论,如果是自己的评论自己也可以删除 -->
                      <!-- 删除评论 -->
                      <el-link
                        v-if="
                          userInfo.userId === blogData.authorId ||
                          userInfo.userId === item.userId
                        "
                        style="margin-right: 20px"
                        @click="deleteUserComment(item)"
                        >删除</el-link
                      >
                      <el-link
                        v-if="!item.isReplying"
                        @click="item.isReplying = !item.isReplying"
                        >回复</el-link
                      >
                      <el-link
                        v-else
                        @click="item.isReplying = !item.isReplying"
                        >收起</el-link
                      >
                    </span>
                  </div>
                  <!-- 评论内容 -->
                  <div
                    class="desc"
                    v-html="item.content"
                    style="text-align: left"
                  ></div>
                  <!-- 进行回复父级评论，生成子评论 -->
                  <div class="replying" v-if="item.isReplying">
                    <el-input
                      type="textarea"
                      style="font-size: 16px"
                      :autosize="{ minRows: 3, maxRows: 5 }"
                      :maxlength="300"
                      show-word-limit
                      placeholder="欢迎填写高质量的评论"
                      v-model.trim="item.otherComment"
                    >
                    </el-input>
                    <div class="CommentBtn">
                      <!-- 子评论需要数据编号 -->
                      <el-button
                        type="danger"
                        size="mini"
                        class="CommentBtn-el-button"
                        @click="addSecondComment(item)"
                        round
                        >评论</el-button
                      >
                    </div>
                  </div>
                  <!-- 对应父评论下的所有子评论，此评论不能再回复和收起  -->
                  <div class="replys">
                    <!-- ||[]防止child为null -->
                    <div
                      v-for="(it, index) in item.child || []"
                      :key="index"
                      class="contain2"
                    >
                      <div class="CommentBox2">
                        <div class="left2">
                          <el-avatar
                            size="large"
                            :src="it.avatarUrl"
                            fit="fit"
                          ></el-avatar>
                        </div>
                        <div class="right2">
                          <div class="subTitle2" style="text-align: left">
                            <span>{{ it.userName }}</span>
                            <span>回复：{{ it.replyUserName }}</span>
                            <span>{{ it.commentTime }}</span>
                            <span class="hoverBtn2">
                              <el-link
                                v-if="
                                  userInfo.userId === blogData.authorId ||
                                  userInfo.userId === it.userId
                                "
                                @click="deleteUserComment(it)"
                                style="margin-right: 20px"
                                >删除</el-link
                              >
                              <el-link
                                v-if="!it.isReplying"
                                @click="it.isReplying = !it.isReplying"
                                >回复</el-link
                              ><el-link
                                v-else
                                @click="it.isReplying = !it.isReplying"
                                >收起</el-link
                              >
                            </span>
                          </div>
                          <div
                            class="desc2"
                            v-html="it.content"
                            style="text-align: left"
                          ></div>
                          <div class="replying" v-if="it.isReplying">
                            <el-input
                              type="textarea"
                              style="font-size: 16px"
                              :autosize="{ minRows: 3, maxRows: 5 }"
                              :maxlength="300"
                              show-word-limit
                              placeholder="欢迎填写高质量的评论"
                              v-model.trim="it.otherComment"
                            >
                            </el-input>
                            <div class="CommentBtn">
                              <!-- 子评论需要数据编号 -->
                              <el-button
                                type="danger"
                                size="mini"
                                class="CommentBtn-el-button"
                                @click="addSecondComment(it)"
                                round
                                >评论</el-button
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-divider class="commentDivider"></el-divider>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-backtop :visibility-height="800" :right="40" :bottom="20"> </el-backtop>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {
  getIsLike,
  getIsCollect,
  addOrRemoveLike,
  addOrRemoveCollect,
  deleteComment,
  addComment,
  getComment,
  getKnowledgeDetail,
  addSecondComment,
} from "@/apis/apis";
import { wordDetectionApi } from "@/apis/wordDetectionApi";
@Component({
  name: "blogDetail",
})
export default class BlogDetail extends Vue {
  // 点赞栏的图标
  likeDefaultImg = require("@/assets/images/userMain/点赞.png");
  likeActiveImg = require("@/assets/images/userMain/like.png");
  // 博客数据
  // 一开始针对当前的博文还需要获取当前用户对其的点赞状态和收藏状态
  blogData: {
    knowledgeId: number;
    title: string;
    authorName: string;
    date: string;
    viewCounts: number;
    likeCounts: number;
    collectCounts: number;
    tags: string[];
    kindName: string;
    content: string;
    authorId: number;
    // 点赞的激活状态
    isLikeActive?: boolean;
    // 收藏的激活状态
    isCollectActive?: boolean;
    bloggerAvatarUrl?: string;
  } = {
    // 默认为1
    knowledgeId: 1,
    title: "文章标题",
    authorName: "User",
    date: "2024年1月13日",
    viewCounts: 1,
    likeCounts: 1,
    collectCounts: 1,
    tags: [],
    kindName: "原创",
    content: "",
    authorId: 1,
    isLikeActive: false,
    isCollectActive: false,
    bloggerAvatarUrl: "",
  };
  // 当前用户自己的信息以及用户对应的评论
  userInfo: any = {
    name: this.$store.state.nickName,
    userId: this.$store.state.userId,
    avatarUrl: this.$store.state.avatarUrl,
    // 用户自己输入的评论,只在发布第一级评论时使用
    selfComment: "",
  };
  temComments: [
    {
      commentId: number;
      userName: string;
      avatarUrl: string;
      commentTime: string;
      content: string;
      isReplying: boolean;
      // 当前用户回复的评论，回复第一级评论时使用
      otherComment: string;
      hierarchy: number;
      userId?: number;
      child: [
        {
          commentId: number;
          avatarUrl: string;
          userName: string;
          content: string;
          commentTime: string;
          replyUserName: string;
          isReplying: boolean;
          // 当前用户回复的评论，回复第二级评论时使用
          otherComment: string;
          hierarchy: number;
          userId?: number;
        }
      ];
    }
  ] = [] as any;

  // 用户信息的id和作者的id一样时可以删除所有的评论
  // 父级评论的id
  parentId: string = "0";
  // 待删除的评论的id
  deleteCommentId: string = "";

  async mounted() {
    // 获取用户对本文章的点赞状态
    await this.getKnowledgeId();
    this.getIsUserLike();
    this.getIsUserCollect();
    this.getCurrentKnowledgeDetail();
    this.getKnowledgeComments();
  }

  // 注意获取知识的函数调用的先后顺序
  // 0.获取知识的id,必须要先获取id才能获取其他的信息
  async getKnowledgeId() {
    // 通过query获取
    let id: number = Number(this.$route.query.knowledgeId);
    this.blogData.knowledgeId = id;
  }
  // 1.获取文章的详细信息
  getCurrentKnowledgeDetail() {
    getKnowledgeDetail(this.blogData.knowledgeId)
      .then((res) => {
        if (res.data.code === "200") {
          let resData = res.data.data;
          this.blogData.title = resData.title;
          this.blogData.authorName = resData.authorName;
          this.blogData.date = resData.createTime;
          this.blogData.viewCounts = resData.viewCounts;
          this.blogData.likeCounts = resData.likeCounts;
          this.blogData.collectCounts = resData.collectCounts;
          // 注意tag的格式是{tagId: 1, tagName: "测试"}，需要转换成["测试"]
          // tag不为空才能遍历
          if (resData.tag) {
            this.blogData.tags = resData.tag.map((item: any) => item.tagName);
          } else {
            this.blogData.tags = [];
          }
          this.blogData.authorId = resData.authorId;
          this.blogData.bloggerAvatarUrl = resData.avatar;
          // 为空就是原创
          if (resData.kind) {
            if (resData.kind === "0") {
              this.blogData.kindName = "原创";
            } else if (resData.kind === "1") {
              this.blogData.kindName = "转载";
            } else {
              this.blogData.kindName = "翻译";
            }
          } else {
            this.blogData.kindName = "原创";
          }
          this.blogData.content = resData.content;
          this.$message.success("获取文章信息成功");
        } else {
          this.$message.error("获取文章信息失败，请重试");
          console.log("获取文章信息失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from getCurrentKnowledgeDetail");
      });
  }
  // 1.获取用户对当前文章的点赞状态
  getIsUserLike() {
    getIsLike(this.blogData.knowledgeId)
      .then((res) => {
        // console.log(res);
        if (res.data.code === "200") {
          // 注意isLikeActive是boolean类型的数据，后期根据后端返回的数据进行修改
          this.blogData.isLikeActive = res.data.data;
        } else {
          this.$message.error("获取点赞状态失败");
          console.log("获取点赞状态失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from getIsUserLike");
      });
  }

  // 2.获取用户对当前文章的收藏状态
  getIsUserCollect() {
    getIsCollect(this.blogData.knowledgeId)
      .then((res) => {
        if (res.data.code === "200") {
          this.blogData.isCollectActive = res.data.data;
          // this.$message.success("获取收藏状态成功");
        } else {
          this.$message.error("获取收藏状态失败");
          console.log("获取收藏状态失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from getIsUserCollect");
      });
  }

  // 3.给文章进行点赞
  addLikeCount() {
    // 先向后端发出请求让点赞数增加，同时保存在我点赞的文章中，成功后再改变图标，同时修改本博客数据
    addOrRemoveLike(this.blogData.knowledgeId)
      .then((res) => {
        if (res.data.code === "200") {
          this.blogData.isLikeActive = !this.blogData.isLikeActive;
          this.blogData.likeCounts = res.data.data;
          // 再次
          this.$message.success("点赞成功");
        } else {
          this.$message.error("点赞失败");
          console.log("点赞失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from addLikeCount");
      });
  }

  // 4.取消给文章的点赞
  reduceLikeCount() {
    // 先向后端发出请求让点赞数减少，同时保存在我点赞的文章中，成功后再改变图标，同时修改本博客数据
    addOrRemoveLike(this.blogData.knowledgeId)
      .then((res) => {
        if (res.data.code === "200") {
          this.blogData.isLikeActive = !this.blogData.isLikeActive;
          // 并从后端获取现在的点赞数
          this.blogData.likeCounts = res.data.data;
          this.$message.success("取消点赞成功");
        } else {
          this.$message.error("取消点赞失败");
          console.log("取消点赞失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from reduceLikeCount");
      });
  }
  // 5.决策不同点赞点击事件的处理函数
  handleLikeClick() {
    this.blogData.isLikeActive ? this.reduceLikeCount() : this.addLikeCount();
  }

  // 6.给文章进行收藏
  addCollectCount() {
    addOrRemoveCollect(this.blogData.knowledgeId)
      .then((res) => {
        if (res.data.code === "200") {
          this.blogData.isCollectActive = !this.blogData.isCollectActive;
          console.log(res.data.data);

          this.blogData.collectCounts = res.data.data;
          this.$message.success("收藏成功");
        } else {
          this.$message.error("收藏失败");
          console.log("收藏失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from addCollectCount");
      });
  }

  // 7.取消给文章的收藏
  // 移除当前博客的收藏
  reduceCollectCount() {
    addOrRemoveCollect(this.blogData.knowledgeId)
      .then((res) => {
        if (res.data.code === "200") {
          this.blogData.isCollectActive = !this.blogData.isCollectActive;
          // this.blogData.collectCounts -= 1;
          this.blogData.collectCounts = res.data.data;
          this.$message.success("取消收藏成功");
        } else {
          this.$message.error("取消收藏失败");
          console.log("取消收藏失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from reduceCollectCount");
      });
  }
  // 8.决策不同收藏点击事件的处理函数
  handleCollectClick() {
    this.blogData.isCollectActive
      ? this.reduceCollectCount()
      : this.addCollectCount();
  }

  // 9.获取所有的评论信息
  getKnowledgeComments() {
    getComment(this.blogData.knowledgeId)
      .then((res) => {
        if (res.data.code === "200") {
          let resData = res.data.data;
          this.traverseComment(resData);
          this.$message.success("获取评论成功");
        } else {
          this.$message.error("获取评论失败，请重试");
          console.log("获取评论失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from getComments");
      });
  }
  // 9.1遍历评论
  traverseComment(comments: any) {
    // 遍历父级评论
    let len = comments.length;
    for (let i = 0; i < len; i++) {
      this.temComments.push({
        commentId: comments[i].id,
        userName: comments[i].userName,
        avatarUrl: comments[i].avatar,
        commentTime: comments[i].createTime,
        content: comments[i].comment,
        isReplying: false,
        otherComment: "",
        hierarchy: 0,
        userId: comments[i].userId,
        child: [] as any,
      });
      // 子评论为空直接设为空数组，否则遍历子评论
      if (comments[i].commentReplyVoList.length > 0) {
        let childLen = comments[i].commentReplyVoList.length;
        for (let j = 0; j < childLen; j++) {
          this.temComments[i].child.push({
            commentId: comments[i].commentReplyVoList[j].id,
            avatarUrl: comments[i].commentReplyVoList[j].avatar,
            userName: comments[i].commentReplyVoList[j].userName,
            content: comments[i].commentReplyVoList[j].content,
            commentTime: comments[i].commentReplyVoList[j].createTime,
            replyUserName: comments[i].commentReplyVoList[j].replyuserName,
            isReplying: false,
            userId: comments[i].commentReplyVoList[j].userId,
            hierarchy: 1,
            otherComment: "",
          });
        }
      }
    }
  }

  // 10.向文章中添加一级评论
  addUserComment() {
    // 先调用敏感词检测的api,检测成功后再进行添加
    wordDetectionApi(this.userInfo.selfComment, 0)
      .then((res) => {
        if (res.status === 200) {
          // 检测通过可以添加评论
          if (res.data.isPass) {
            addComment(this.blogData.knowledgeId, this.userInfo.selfComment)
              .then((res) => {
                if (res.data.code === "200") {
                  this.$message.success("评论成功");
                  // 重新请求评论
                  this.temComments = [] as any;
                  this.getKnowledgeComments();
                } else {
                  this.$message.error("评论失败，请重试");
                  console.log("评论失败");
                }
              })
              .catch((err) => {
                console.log(err);
                console.log("this is error from addUserComment");
              });
          } else {
            let words = res.data.data.words;
            // 将字符串数组转化为、分割的字符串
            let wordsStr = words.join("、");
            this.$message.error("评论失败，评论内容含有敏感词汇：" + wordsStr);
            console.log("评论失败，评论内容含有敏感词汇");
          }
        } else {
          this.$message.error("评论失败，请重试");
          console.log("评论失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from addUserComment");
      });
  }

  // 11.向文章中添加回复
  addSecondComment(item: any) {
    // console.log(item);
    wordDetectionApi(item.otherComment, 0)
      .then((res) => {
        if (res.status === 200) {
          if (res.data.isPass) {
            addSecondComment(item.commentId, item.otherComment, item.userId)
              .then((res) => {
                if (res.data.code === "200") {
                  this.$message.success("回复成功");
                  // 重新请求评论
                  this.temComments = [] as any;
                  this.getKnowledgeComments();
                } else {
                  this.$message.error("回复失败，请重试");
                  console.log("回复失败");
                }
              })
              .catch((err) => {
                console.log(err);
                console.log("this is error from addSecondComment");
              });
          } else {
            let words = res.data.data.words;
            // 将字符串数组转化为、分割的字符串
            let wordsStr = words.join("、");
            this.$message.error("回复失败，回复内容含有敏感词汇：" + wordsStr);
            console.log("回复失败，回复内容含有敏感词汇");
          }
        } else {
          this.$message.error("回复失败，请重试");
          console.log("回复失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from addSecondComment");
      });
  }

  // 12.删除文章的评论-->TODO:没测试
  // 删除1级评论会删除下面的所有二级
  // 删除二级评论只会删除一条
  deleteUserComment(item: any) {
    deleteComment(item.commentId, item.hierarchy)
      .then((res) => {
        if (res.data.code === "200") {
          this.$message.success("删除评论成功");
          // 重新请求评论
          this.temComments = [] as any;
          this.getKnowledgeComments();
        } else {
          this.$message.error("删除评论失败，请重试");
          console.log("删除评论失败");
        }
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from deleteUserComment");
      });
  }
}
</script>

<style lang="scss" scoped>
$title-font-size: 18px;
$title-font-weight: 700;
// 评论区容器的padding
$comment-padding: 12px;
// 评论区个人信息字体颜色
$comment-title-color: #777888;
.blog-detail-container {
  width: 1300px;
  margin: 0 auto;
  padding: 0px 10px;
  .blog-detail-content {
    .blog-title {
      width: 100%;
      height: 40px;
      text-align: left;
      font-size: $title-font-size;
      font-weight: $title-font-weight;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .blog-info {
      text-align: left;
      background-color: aliceblue;
      padding: 10px 10px;
      border-radius: 4px;
      .blog-info-text {
        margin-bottom: 10px;
        .blog-info-text-item {
          margin-right: 20px;
          .blog-info-text-item-icon {
            font-size: 15px;
            margin-right: 5px;
          }
        }
      }
      .blog-info-tags {
        .blog-info-tags-item {
          margin-right: 10px;
        }
      }
    }

    #blog-content {
      padding: 0px 30px 30px 0px;
      img {
        display: block !important;
        margin: 0 auto !important;
      }
    }
    .info-like-container {
      // 使用sticky属性，当滚动到底部时，点赞和收藏栏会固定在底部
      position: sticky;
      z-index: 888;
      margin: 0 auto;
      bottom: 0;
      // 设置阴影效果
      box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.1),
        -3px -4px 10px rgba(0, 0, 0, 0.1);
      width: 1260px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // height: 60px;
      border-radius: 5px;
      .blog-detail-author-info {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 270px;
      }
      .blog-like-collect-content {
        width: 200px;
        margin-right: 80px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .blog-like {
          margin-right: 20px;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            cursor: pointer;
            .is-like-img {
              width: 20px;
              height: 20px;
              margin-right: 5px;
            }
          }
        }
        .blog-collect {
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
    .comment {
      padding-top: 20px;
      .title {
        font-size: $title-font-size;
        font-weight: $title-font-weight;
        text-align: left;
      }
      .contentBox {
        .CommentBox {
          padding: $comment-padding;
          display: flex;
          .left {
            // 头像栏容器所占宽度
            width: 100px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
          }
          .right {
            // right被拉伸填充所有空间
            flex: 1;
            .subTitle {
              color: $comment-title-color;
              font-size: 15px;
              span {
                margin-right: 12px;
              }
              .hoverBtn {
                float: right;
              }
            }
          }
        }
        // 子评论的设置
        .CommentBox2 {
          padding: $comment-padding;
          display: flex;
          .left2 {
            width: 100px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
          }
          .right2 {
            flex: 1;
            .subTitle2 {
              color: $comment-title-color;
              font-size: 15px;
              span {
                margin-right: 12px;
              }
              .hoverBtn2 {
                float: right;
              }
            }
          }
        }
        // 设置自己评论区的button的样式
        .CommentBtn {
          width: 100%;
          padding-top: 10px;
          display: flex;
          justify-content: flex-end;
          .CommentBtn-el-button {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>